<!DOCTYPE html><html class="theme-next gemini use-motion" lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="/MyBlog/lib/pace/pace.min.js?v=1.0.2"></script><link href="/MyBlog/lib/pace/pace-theme-loading-bar.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/MyBlog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/MyBlog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/MyBlog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/MyBlog/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/MyBlog/images/bitbug_favicon.ico?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/MyBlog/images/bitbug_favicon16.ico?v=5.1.4"><link rel="mask-icon" href="/MyBlog/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Hexo, NexT"><meta property="og:type" content="website"><meta property="og:title" content="Yang&#39;s Blog"><meta property="og:url" content="https://gitee.com/yang_yu_xiang/MyBlog/page/2/index.html"><meta property="og:site_name" content="Yang&#39;s Blog"><meta property="article:author" content="杨雨翔"><meta name="twitter:card" content="summary"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/MyBlog/",scheme:"Gemini",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="https://gitee.com/yang_yu_xiang/MyBlog/page/2/"><title>Yang's Blog</title><meta name="generator" content="Hexo 4.2.1"></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-home"><div class="headband"></div><a href="https://gitee.com/yang_yu_xiang" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/MyBlog/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Yang's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">永远年轻 永远热泪盈眶</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/MyBlog/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-tags"><a href="/MyBlog/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-categories"><a href="/MyBlog/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-archives"><a href="/MyBlog/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/23/TCP%E8%BF%9E%E6%8E%A5%E7%9A%84%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E4%B8%8E%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/23/TCP%E8%BF%9E%E6%8E%A5%E7%9A%84%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E4%B8%8E%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/" itemprop="url">TCP连接的三次握手与四次挥手</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-23T10:53:30+08:00">2020-10-23 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-27T23:23:01+08:00">2020-10-27 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/23/TCP%E8%BF%9E%E6%8E%A5%E7%9A%84%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E4%B8%8E%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/23/TCP%E8%BF%9E%E6%8E%A5%E7%9A%84%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E4%B8%8E%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.2k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">4</span></div></div></header><div class="post-body" itemprop="articleBody"><h1><a href="#" class="headerlink"></a></h1><p>&emsp;&emsp;客户端与服务器之间数据的发送和返回的过程当中需要创建一个叫<code>TCP connection</code>的东西；由于TCP不存在连接的概念，只存在请求和响应，请求和响应都是数据包，它们之间都是经过由TCP创建的一个从客户端发起，服务器接收的类似连接的通道，这个连接可以一直保持，http请求是在这个连接的基础上发送的。<br>在一个TCP连接上是可以发送多个http请求的，不同的版本这个模式不一样。</p><ul><li>在HTTP/1.0中这个TCP连接是在http请求创建的时候同步创建的，http请求发送到服务器端，服务器端响应了之后，这个TCP连接就关闭了；</li><li>HTTP/1.1中可以以某种方式声明这个连接一直保持，一个请求传输完之后，另一个请求可以接着传输。这样的好处是：在创建一个TCP连接的过程中需要“三次握手”的消耗，“三次握手”代表有三次网络传输。</li></ul><p>&emsp;&emsp;如果TCP连接保持，第二个请求发送就没有这“三次握手”的消耗。HTTP/2中同一个TCP连接里还可以并发地传输http请求。</p><h1 id="TCP报文格式简介"><a href="#TCP报文格式简介" class="headerlink" title="TCP报文格式简介"></a>TCP报文格式简介</h1><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/TCp.png" alt=""></p><p>其中比较重要的字段有：</p><p>(1)序号 (sequence number )：Seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标记。</p><p>(2)确认号 (acknowledgement number )：Ack序号,占32位,只有ACK标志位为1时,确认序号字段才有效,Ack=Seq+1。</p><p>(3)标志位 (Flags )：共6个,即URG、ACK、PSH、RST、SYN、FIN等。具体含义如下：</p><ul><li>URG：紧急指针 (urgent pointer )有效。</li><li>ACK：确认序号有效。</li><li>PSH：接收方应该尽快将这个报文交给应用层。</li><li>RST：重置连接。</li><li>SYN：发起一个新连接。</li><li>FIN：释放一个连接。<div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/23/TCP%E8%BF%9E%E6%8E%A5%E7%9A%84%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E4%B8%8E%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/#more" rel="contents">阅读全文 &raquo;</a></div></li></ul></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/08/%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/08/%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/" itemprop="url">项目优化策略</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-08T09:24:25+08:00">2020-10-08 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-27T17:01:45+08:00">2020-10-27 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/08/%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/08/%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">3.1k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">12</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="为开发模式与发布模式指定不同的打包入口"><a href="#为开发模式与发布模式指定不同的打包入口" class="headerlink" title="为开发模式与发布模式指定不同的打包入口"></a>为开发模式与发布模式指定不同的打包入口</h1><p>&emsp;&emsp;默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(<strong>即src/main.js</strong>)。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件。</p><ul><li>开发模式的入口文件为src/main-dev.js</li><li>发布模式的入口文件为src/main-prod.js</li></ul><p>在<code>vue.config.js</code>导出的配置对象中，我们可以新增<code>configureWebpack</code>或<code>chainWebpack</code>节点，来自定义webpack的打包配置</p><p>在这里,configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同:</p><ul><li>chainWebpack通过<code>链式编程</code>的形式，来修改默认的webpack配置</li><li>configureWebpack通过<code>操作对象</code>的形式，来修改默认的webpack配置</li></ul><p>我们先删除main.js,把内容复制到<code>main-dev.js</code>和<code>main-prod.js</code>中<br><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/mainprodjs.png" alt=""></p><p>下面通过chainWebpack自定义打包入口</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//module.exports暴露配置对象</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//chainwebpack声明了一个配置节点，config接收默认webpack配置对象</span></span><br><span class="line">    chainwebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">//判断产品处于什么模式</span></span><br><span class="line">        config.when(process.env.NODE_ENV=== <span class="string">'production'</span>,config=&gt;&#123;</span><br><span class="line">            <span class="comment">//.entry得到默认的打包入口，clear清空默认的打包入口，add新增自己的打包入口</span></span><br><span class="line">            config.entry(<span class="string">'app'</span>).clear().add(<span class="string">'./src/main-prod.js'</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">        config.when(process.env.NODE_ENV === <span class="string">'development'</span>,config=&gt;&#123;</span><br><span class="line">            config.entry(<span class="string">'app'</span>).clear().add(<span class="string">'./src/main-dev.js'</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这样，在发布阶段的修改就可以在<code>main-prod.js</code>中进行</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/08/%E9%A1%B9%E7%9B%AE%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/06/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/06/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86/" itemprop="url">Vue双向绑定原理</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-06T21:15:06+08:00">2020-10-06 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-09T11:46:25+08:00">2020-10-09 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/06/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/06/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.4k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">5</span></div></div></header><div class="post-body" itemprop="articleBody"><p>先放一张图，这是响应原理的实现思路</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86.png" alt=""></p><ul><li><p>在new出来的 Vue对象中，我们定义<code>data</code>来存放我们的数据</p></li><li><p>在<code>Observer</code>对象中，我们通过<code>Object.defineProperty</code>来劫持所有的data属性。其实就是给每一个属性放进其对应的<code>Dep</code>对象。当数据发生改变时，调用<code>Dep</code>中的<code>notify</code>方法通知<code>watcher</code>执行<code>update()</code>方法做出改变</p></li><li><p>在<code>Dep</code>对象中，有一个<code>subs</code>数组，数组中存放着所有监听着这个数据的<code>data</code>对象(watcher)</p></li><li><p>在<code>Complite</code>对象中，我们通过<code></code>来解析el模板中的指令。在每个使用的地方创建一个<code>watcher</code>对象,并把这个对象放到<code>Dep</code>中</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/06/Vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86/#more" rel="contents">阅读全文 &raquo;</a></div></li></ul></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/04/rem%E5%B8%83%E5%B1%80/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/04/rem%E5%B8%83%E5%B1%80/" itemprop="url">rem布局</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-04T10:56:20+08:00">2020-10-04 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-04T20:36:34+08:00">2020-10-04 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/04/rem%E5%B8%83%E5%B1%80/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/04/rem%E5%B8%83%E5%B1%80/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">731 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">2</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="常见移动web布局适配方法"><a href="#常见移动web布局适配方法" class="headerlink" title="常见移动web布局适配方法"></a>常见移动web布局适配方法</h1><ul><li>固定高度，宽度百分比：这种方法只适合简单要求不高的webApp，几乎达不到大型项目的要求，属于过时的方法。</li><li>Media Query（媒体查询）：现在比较主流的适配方案，比如我们常用的样式框架Bootstrap就是靠这个起家的，它能完成大部分项目需求，但是编写过于复杂。</li><li>flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。</li></ul><h1 id="rem单位介绍"><a href="#rem单位介绍" class="headerlink" title="rem单位介绍"></a>rem单位介绍</h1><p>&emsp;&emsp;rem（font size of the root element）是相对长度单位。相对于根元素（即html元素）font-size计算值的倍数。<br>&emsp;&emsp;适配原理：将px替换成rem，动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。<br>现在我们作一个实验，你可以新建一个网页，并写入如下代码：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"test"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"hello"</span>&gt;</span>Hello <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>&emsp;&emsp;然后给html一个基本的样式:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.test</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">320px</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">160px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: bisque;</span><br><span class="line">    <span class="attribute">text-align</span>: text；</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hello</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/04/rem%E5%B8%83%E5%B1%80/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/09/08/grid%E5%B8%83%E5%B1%80/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/09/08/grid%E5%B8%83%E5%B1%80/" itemprop="url">grid布局</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-08T21:38:06+08:00">2020-09-08 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-09-10T22:34:59+08:00">2020-09-10 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/09/08/grid%E5%B8%83%E5%B1%80/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/09/08/grid%E5%B8%83%E5%B1%80/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.6k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">7</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="什么是grid布局？"><a href="#什么是grid布局？" class="headerlink" title="什么是grid布局？"></a>什么是grid布局？</h1><p>&emsp;&emsp;Flex布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是<code>一维布局</code>，Grid布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是<code>二维布局</code>，Grid布局远比 Flex布局强大.但是兼容性没有flex布局好</p><h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><p>grid布局中有两个基本概念：</p><ul><li>容器</li></ul><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/grid%E5%AE%B9%E5%99%A8.png" alt=""></p><ul><li>项目</li></ul><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/grid%E9%A1%B9%E7%9B%AE.png" alt=""></p><ul><li>行、列</li></ul><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/grid%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5.png" alt=""></p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/09/08/grid%E5%B8%83%E5%B1%80/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/09/06/%E8%B7%A8%E5%9F%9F%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/09/06/%E8%B7%A8%E5%9F%9F%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95/" itemprop="url">跨域处理方法</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-06T11:37:30+08:00">2020-09-06 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-09-06T11:46:04+08:00">2020-09-06 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/09/06/%E8%B7%A8%E5%9F%9F%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/09/06/%E8%B7%A8%E5%9F%9F%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">92 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">1</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="Node配置CORS"><a href="#Node配置CORS" class="headerlink" title="Node配置CORS"></a>Node配置CORS</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//cors</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> allowCrossDomain = <span class="function"><span class="keyword">function</span>(<span class="params">req,res，next</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//请求源ajax http://localhost:8080</span></span><br><span class="line">    res.header(<span class="string">"Access-Control-Allow-Origin"</span>，<span class="string">"*"</span>);</span><br><span class="line">    <span class="number">1</span>/请求头―x-token</span><br><span class="line">    res.header(<span class="string">"Access-Control-Allow-Headers"</span>,<span class="string">"*"</span>);</span><br><span class="line">    <span class="comment">//请求方法get post put del</span></span><br><span class="line">    res.header(<span class="string">"Access-Control-Allow-Methods"</span>，<span class="string">"*"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">app.use(allowCrossDomain);</span><br></pre></td></tr></table></figure><h1 id="使用webpack代理"><a href="#使用webpack代理" class="headerlink" title="使用webpack代理"></a>使用webpack代理</h1><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">    proxy: &#123;//代理</span><br><span class="line">        '/api': &#123;</span><br><span class="line">            target: 'http://localhost:3000',</span><br><span class="line">            pathRewrite: &#123;'/api':''&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后在ajax的url中把<code>http://localhost:3000</code>替换为<code>/api</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">axios.get(<span class="string">'/api/user'</span>)</span><br></pre></td></tr></table></figure></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E5%9B%9B%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E5%9B%9B%EF%BC%89/" itemprop="url">Koa框架（四） Koa中的Cookie和Session</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-23T17:19:30+08:00">2020-08-23 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-05T13:39:46+08:00">2020-10-05 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/" itemprop="url" rel="index"><span itemprop="name">Node.js</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/Koa/" itemprop="url" rel="index"><span itemprop="name">Koa</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E5%9B%9B%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E5%9B%9B%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">481 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">2</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="Koa中Cookie的使用"><a href="#Koa中Cookie的使用" class="headerlink" title="Koa中Cookie的使用"></a>Koa中Cookie的使用</h1><p>cookie可以实现的功能：</p><ul><li>保存用户信息</li><li>浏览器历史记录</li><li>猜你喜欢的功能</li><li>10天免登陆</li><li>多个页面之间的数据传递</li><li>cookie实现购物车功能<h2 id="设置Cookie的值"><a href="#设置Cookie的值" class="headerlink" title="设置Cookie的值"></a>设置Cookie的值</h2><blockquote><p>ctx.cookies.set(name,value,{options})</p></blockquote></li></ul><p>其中，options参数可选以下值：</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/options%E5%80%BC.png" alt=""></p><h2 id="Cookie的获取"><a href="#Cookie的获取" class="headerlink" title="Cookie的获取"></a>Cookie的获取</h2><blockquote><p>ctx.cookies.get(‘name’)</p></blockquote><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E5%9B%9B%EF%BC%89/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%89%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%89%EF%BC%89/" itemprop="url">Koa框架（三） 中间件</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-23T11:53:42+08:00">2020-08-23 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-19T14:20:11+08:00">2020-10-19 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/" itemprop="url" rel="index"><span itemprop="name">Node.js</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/Koa/" itemprop="url" rel="index"><span itemprop="name">Koa</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%89%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%89%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">982 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">3</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="什么是中间件"><a href="#什么是中间件" class="headerlink" title="什么是中间件"></a>什么是中间件</h1><p>&emsp;&emsp;通俗的讲:中间件就是匹配路由之前或者匹配路由完成做的一系列的操作，我们就可以把它叫做中间件。<br>&emsp;&emsp;在<code>express</code>中间件(Middleware)是一个函数,它可以访问请求对象<code>(request object(req))</code>,响应对象<code>(response object(res))</code>，和web应用中处理请求-响应循环流程中的中间件，一般被命名为<code>next</code>的变量。在Koa中中间件和express有点类似。</p><p>中间件的功能包括:</p><ul><li>执行任何代码。</li><li>修改请求和响应对象。</li><li>终结请求-响应循环。</li><li>调用堆栈中的下一个中间件。</li></ul><p>如果我的get、post回调函数中，没有next参数，那么就匹配上第一个路由，就不会往下匹配了。如果想往下匹配的话，那么需要写<code>next()</code></p><h1 id="应用级中间件"><a href="#应用级中间件" class="headerlink" title="应用级中间件"></a>应用级中间件</h1><p>我们来实现一个不管接到任何请求都打印日期的中间件，也叫<strong>应用级中间件</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Koa = <span class="built_in">require</span>( <span class="string">'koa '</span>);</span><br><span class="line"><span class="keyword">const</span> Router = <span class="built_in">require</span>(<span class="string">'koa-router'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Koa();</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"><span class="comment">//设置中间件，可以设置匹配路由 app.use('/',functio()) 不设置默认匹配所有路由</span></span><br><span class="line">app.use(<span class="keyword">async</span>(ctx,next)=&gt;&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">    <span class="comment">//当前路由匹配完成以后继续向下匹配,如果不写next，路由匹配到了就不会继续向下</span></span><br><span class="line">    <span class="keyword">await</span> next();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">ctx,next</span>)</span>&#123;</span><br><span class="line">    ctx.body=<span class="string">"Hello koa"</span>;</span><br><span class="line">&#125;)</span><br><span class="line">router.get(<span class="string">'/news '</span>,(ctx,next)=&gt;&#123;</span><br><span class="line">    ctx.body=<span class="string">"新闻页面"</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.use(router.routes());<span class="comment">//作用:启动路由</span></span><br><span class="line">app.use(router.allowedMethods());<span class="comment">//作用:当请求出错时的处理逻辑</span></span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/23/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%89%EF%BC%89/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%8C%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%8C%EF%BC%89/" itemprop="url">Koa框架（二） 路由</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-22T21:15:12+08:00">2020-08-22 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-08-23T17:15:20+08:00">2020-08-23 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/" itemprop="url" rel="index"><span itemprop="name">Node.js</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/Koa/" itemprop="url" rel="index"><span itemprop="name">Koa</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%8C%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%8C%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">786 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">3</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="Koa路由介绍和使用"><a href="#Koa路由介绍和使用" class="headerlink" title="Koa路由介绍和使用"></a>Koa路由介绍和使用</h1><p>&emsp;&emsp;路由（Routing）是由一个URL(或者叫路径）和一个特定的HTTP方法（GET、POST等)组成的，涉及到应用如何响应客户端对某个网站节点的访问。</p><p>&emsp;&emsp;通俗的讲:路由就是根据不同的URL地址，加载不同的页面实现不同的功能。</p><p>&emsp;&emsp;Koa中的路由和Express有所不同，在Express中直接引入Express就可以配置路由，但是在Koa中我们需要安装对应的<code>koa-router</code>路由模块来实现。</p><blockquote><p>npm install –save koa-router</p></blockquote><p>然后就可以使用了</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//导包</span></span><br><span class="line"><span class="keyword">var</span> Koa = <span class="built_in">require</span> (<span class="string">'koa'</span>) :</span><br><span class="line"><span class="keyword">var</span> Router = <span class="built_in">require</span> (<span class="string">'koa-router'</span>);</span><br><span class="line"><span class="comment">//实例化</span></span><br><span class="line"><span class="keyword">var</span> app =  <span class="keyword">new</span> Koa ();</span><br><span class="line"><span class="keyword">var</span> router = <span class="keyword">new</span> Router();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//配置路由，在express中，调用参数有req，res，但是在Koa中request和response的所有信息都放在context（上下文）中 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">//写法一</span></span><br><span class="line">router.get(<span class="string">'/'</span>, <span class="keyword">async</span>(ctx)=&gt; &#123;</span><br><span class="line">    <span class="comment">//ctx.body相当于res.send()</span></span><br><span class="line">    ctx.body=<span class="string">'首页'</span><span class="comment">//返回数据</span></span><br><span class="line">&#125;).get(<span class="string">'/news'</span>,<span class="keyword">async</span>(ctx)=&gt;&#123;</span><br><span class="line">    ctx.body=<span class="string">'新闻页'</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//写法二</span></span><br><span class="line">router.get(<span class="string">'/'</span>, <span class="keyword">async</span>(ctx)=&gt; &#123;</span><br><span class="line">    <span class="comment">//ctx.body相当于res.send()</span></span><br><span class="line">    ctx.body=<span class="string">'首页'</span><span class="comment">//返回数据</span></span><br><span class="line">&#125;)</span><br><span class="line">router.get(<span class="string">'/news'</span>,<span class="keyword">async</span>(ctx)=&gt;&#123;</span><br><span class="line">    ctx.body=<span class="string">'新闻页'</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//启动路由  </span></span><br><span class="line">app</span><br><span class="line">    .use(router.routes())</span><br><span class="line">    .use(router.allowedMethods());</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%8C%EF%BC%89/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%80%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%80%EF%BC%89/" itemprop="url">Koa框架（一） 安装和基本使用</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-22T20:54:18+08:00">2020-08-22 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-08-23T17:15:19+08:00">2020-08-23 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/" itemprop="url" rel="index"><span itemprop="name">Node.js</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/Node-js/Koa/" itemprop="url" rel="index"><span itemprop="name">Koa</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%80%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/22/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%B8%80%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">430 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">1</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="一、Koa框架介绍"><a href="#一、Koa框架介绍" class="headerlink" title="一、Koa框架介绍"></a>一、Koa框架介绍</h1><p>&emsp;&emsp;Node.js是一个异步的世界，官方API支持的都是callback形式的异步编程模型，这会带来许多问题，例如:1、callback嵌套问题2、异步函数中可能同步调用callback返回数据，带来不一致性。为了解决以上问题Koa出现了。</p><p>&emsp;&emsp;<strong>Koa–基于Node.js平台的下一代web开发框架</strong></p><p>&emsp;&emsp;koa是由Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的Web框架。使用koa编写web应用，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写Web应用变得得心应手。<strong>开发思路和express差不多，最大的特点就是避免异步嵌套</strong></p><h1 id="Koa2-x的安装使用"><a href="#Koa2-x的安装使用" class="headerlink" title="Koa2.x的安装使用"></a>Koa2.x的安装使用</h1><h2 id="安装Node-js-8-x以上的版本"><a href="#安装Node-js-8-x以上的版本" class="headerlink" title="安装Node.js 8.x以上的版本"></a>安装Node.js 8.x以上的版本</h2><p>&emsp;&emsp;开发Koa2之前，Node.js是有要求的，它要求Node.js版本高于V7.6。因为 node.js 7.6版本开始完全支持async/await，所以才能完全你支持我们的Koa2</p><h2 id="安装Koa"><a href="#安装Koa" class="headerlink" title="安装Koa:"></a>安装Koa:</h2><p>&emsp;&emsp;安装Koa框架和我们以前安装其他模块是一样的。</p><blockquote><p>npm install –save koa / cnpm install –save koa</p></blockquote><p>–save参数，表示自动修改package.json文件，自动添加依赖项。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//我们先npm init --yes初始化项目，自动创建package.json</span></span><br><span class="line"><span class="comment">//然后创建app.js  如下</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//引入</span></span><br><span class="line"><span class="keyword">const</span> Koa=<span class="built_in">require</span>(<span class="string">'koa'</span>);</span><br><span class="line"><span class="comment">//实例化</span></span><br><span class="line"><span class="keyword">const</span> app=<span class="keyword">new</span> Koa();</span><br><span class="line"></span><br><span class="line">app.use(<span class="keyword">async</span>(ctx)=&gt;&#123;</span><br><span class="line">    ctx.body=<span class="string">'你好koa2.x'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//相当于 express中</span></span><br><span class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req.res</span>)</span>&#123;</span><br><span class="line">    res.send(<span class="string">'你好koa2.x'</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article></section><nav class="pagination"><a class="extend prev" rel="prev" href="/MyBlog/">&lt;</a><a class="page-number" href="/MyBlog/">1</a><span class="page-number current">2</span><a class="page-number" href="/MyBlog/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/MyBlog/page/6/">6</a><a class="extend next" rel="next" href="/MyBlog/page/3/">&gt;</a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><section class="site-overview-wrap sidebar-panel sidebar-panel-active"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg" alt="杨雨翔"><p class="site-author-name" itemprop="name">杨雨翔</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/MyBlog/archives/"><span class="site-state-item-count">53</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/MyBlog/categories/index.html"><span class="site-state-item-count">12</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/MyBlog/tags/index.html"><span class="site-state-item-count">32</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://gitee.com/yang_yu_xiang" target="_blank" title="码云"><i class="fa fa-fw fa-git"></i>码云</a> </span><span class="links-of-author-item"><a href="http://wpa.qq.com/msgrd?v=3&uin=1372201820&site=qq&menu=yes" target="_blank" title="QQ"><i class="fa fa-fw fa-qq"></i>QQ</a> </span><span class="links-of-author-item"><a href="https://github.com/gezhicui" target="_blank" title="Github"><i class="fa fa-fw fa-github"></i>Github</a> </span><span class="links-of-author-item"><a href="mailto:1372201820@qq.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-link"></i> 友情链接</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="https://cloudhao.top/#/search/%E5%9F%9F%E5%90%8D" title="陈昀昊的小窝" target="_blank">陈昀昊的小窝</a></li><li class="links-of-blogroll-item"><a href="http://www.shezhiwei.top/" title="佘智伟的博客" target="_blank">佘智伟的博客</a></li><li class="links-of-blogroll-item"><a href="https://blog.csdn.net/qq_43185206" title="阿呆的小鸡仔" target="_blank">阿呆的小鸡仔</a></li></ul></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">&copy; <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="fa fa-send"></i> </span><span class="author" itemprop="copyrightHolder">杨雨翔</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span class="post-meta-item-text">站点总字数&#58;</span> <span title="站点总字数">61.9k</span></div><div class="busuanzi-count"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="site-uv">本站访问数 <i class="fa fa-user"></i> <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人次 </span><span class="site-pv">本站总访问量 <i class="fa fa-eye"></i> <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/MyBlog/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/MyBlog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/MyBlog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/MyBlog/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/bootstrap.js?v=5.1.4"></script><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script type="text/javascript">var GUEST=["nick","mail","link"],guest="nick";guest=guest.split(",").filter(e=>GUEST.indexOf(e)>-1),new Valine({el:"#comments",verify:!1,notify:!1,appId:"i5Tl5zN4f4LxoJgipanUuaml-gzGzoHsz",appKey:"wqw6uYNCQkeVxBffKebM29NH",placeholder:"说点什么吧...",avatar:"mm",guest_info:guest,pageSize:"10"})</script><script type="text/javascript">var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/MyBlog/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")};function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map((function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}})).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach((function(n){var r=!1,s=0,a=0,i=n.title.trim(),c=i.toLowerCase(),l=n.content.trim().replace(/<[^>]+>/g,""),h=l.toLowerCase(),p=decodeURIComponent(n.url),u=[],f=[];if(""!=i&&(e.forEach((function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}u=u.concat(e(t,c,!1)),f=f.concat(e(t,h,!1))})),(u.length>0||f.length>0)&&(r=!0,s=u.length+f.length)),r){function d(e,o,n,r){for(var s=r[r.length-1],i=s.position,c=s.word,l=[],h=0;i+c.length<=n&&0!=r.length;){c===t&&h++,l.push({position:i,length:c.length});var p=i+c.length;for(r.pop();0!=r.length&&(i=(s=r[r.length-1]).position,c=s.word,p>i);)r.pop()}return a+=h,{hits:l,start:o,end:n,searchTextCount:h}}[u,f].forEach((function(t){t.sort((function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length}))}));var g=[];0!=u.length&&g.push(d(0,0,i.length,u));for(var v=[];0!=f.length;){var $=f[f.length-1],C=$.position,m=$.word,x=C-20,w=C+80;x<0&&(x=0),w<C+m.length&&(w=C+m.length),w>l.length&&(w=l.length),v.push(d(0,x,w,f))}v.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start}));var y=parseInt("1");function T(t,e){var o="",n=e.start;return e.hits.forEach((function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r})),o+=t.substring(n,e.end)}y>=0&&(v=v.slice(0,y));var b="";0!=g.length?b+="<li><a href='"+p+"' class='search-result-title'>"+T(i,g[0])+"</a>":b+="<li><a href='"+p+"' class='search-result-title'>"+i+"</a>",v.forEach((function(t){b+="<a href='"+p+'\'><p class="search-result">'+T(l,t)+"...</p></a>"})),b+="</li>",o.push({item:b,searchTextCount:a,hitCount:s,id:o.length})}})),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id}));var a='<ul class="search-result-list">';o.forEach((function(t){a+=t.item})),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click((function(t){t.stopPropagation(),!1===isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()})),$(".popup-btn-close").click(onPopupClose),$(".popup").click((function(t){t.stopPropagation()})),$(document).on("keyup",(function(t){27===t.which&&$(".search-popup").is(":visible")&&onPopupClose()}))</script><script src="/MyBlog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"model":{"jsonPath":"/MyBlog/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"log":false});</script></body></html>